@extends('admin.layout.base')
@section('content')
    <div class="layui-card-body">
        <div class="layui-form" lay-filter="">
            <form class="layui-form" data-url="{{route('power.update')}}">
                {{csrf_field()}}

                <input type="hidden" name="id" id="power_id" value="{{$data['id']}}">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属父及</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pid" id="tree" value="{{$data['pid']}}" lay-verify="required" lay-filter="tree" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="red">*</span>权限名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" value="{{$data['name']}}" placeholder="请输入权限名称" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="red">*</span>主路由</label>
                    <div class="layui-input-inline">
                        <input type="text" name="route" value="{{$data['route']}}" placeholder="请输入主路由" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="red">*</span>路由别名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="alias" value="{{$data['alias']}}" placeholder="请输入路由别名" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sort" value="{{$data['sort']}}" placeholder="请输入排序" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="type" value="1" title="菜单" lay-filter="type" {{$data['type']=='菜单'?'checked':''}}>
                        <input type="radio" name="type" value="2" title="按钮" lay-filter="type" {{$data['type']=='按钮'?'checked':''}}>
                    </div>
                </div>

                <div class="layui-form-item ico" style="{{$data['type']=='按钮'?'display: none':''}}">
                    <label class="layui-form-label"><span class="red">*</span>图标</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ico" value="{{$data['ico']}}" placeholder="请输入图标" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="submitIng">提 交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('script')
    <script>
        layui.use(['layer', 'jquery', 'treeSelect', 'form'], function () {
            $ = layui.jquery;
            var treeSelect = layui.treeSelect;
            var form = layui.form;
            var pid = $('#tree').val();

            treeSelect.render({
                elem: '#tree',// 选择器
                data: '{{route("power.treeSelect")}}?id=' + $('#power_id').val(),// 数据
                type: 'get',  // 异步加载方式：get/post，默认get
                placeholder: '一级菜单',// 占位符
                search: true, // 是否开启搜索功能：true/false，默认false
                click: function (d) {
                    $('#tree').val(d.current.id);
                },
                success: function (d) {
                    if (pid > 0) {
                        treeSelect.checkNode('tree', pid);
                    }
                }
            });

            form.on('radio(type)', function(data){
                if(data.value == 1){
                    $('.ico input').attr('lay-verify','required');
                    $('.ico').show();
                }else{
                    $('.ico input').attr('lay-verify','');
                    $('.ico').hide();
                }
            });
        });
    </script>
@endsection